import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "home",
        component: HomeView
    },
    {
        path: "/about",
        name: "about",
        // beforeEnter:(to, from, next)=> {},
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            // webpack的魔法注释
            import(/* webpackChunkName: "about" */ "../views/AboutView.vue")
    },
    {
        path: "/info",
        name: "info",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import(/* webpackChunkName: "login" */ "../views/InfoView.vue")
    },
    {
        path: "/Set",
        name: "set",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import(/* webpackChunkName: "login" */ "../views/SetView.vue"),
        children: [
            {
                // path: "/ProductinoClassify",
                // path: "ProductinoClassify",
                path: "/Set/ProductinoClassify",
                name: "set1",
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () =>
                    import(
                        "../views/productionManager/productionClassify/ProductionClassify.vue"
                    )
            }
        ]
    }
];

const router = new VueRouter({
    mode: "hash", // 默认是hash模式，改为history模式
    //  #            没有＃
    // 项目上线部署                      bug 404怎么解决
    //  hash不和服务端交互 是根据hashchange事件实现的
    //  history和服务端交互 是根据pushState和replaceState实现的
    // 原理的介绍
    base: process.env.BASE_URL,
    routes
});

// 全局的钩子函数(2)   组件的钩子函数(3)   路由独享的钩子函数(1)
router.beforeEach((to, from, next) => {
    next();
});
router.afterEach((to, from) => {});

export default router;
